<!doctype html>
<html>
	<head>
		<title>jQuery Slider</title>
		<style>
			.track {
				position : relative;
				width : 200px;
				height : 20px;
				background : #0f0;
				border : 2px solid #f00;
			}
			.handle {
				height : 20px;
				width : 10px;
				z-index : 10;
				position : absolute;
				background : #00f;
			}
			
			.track2 {
				position : relative;
				width : 20px;
				height : 200px;
				background : #0f0;
				border : 2px solid #f00;
			}
			.handle2 {
				height : 10px;
				width : 20px;
				z-index : 10;
				position : absolute;
				background : #00f;
			}
		</style>
	</head>
	<body>
		<div id="f1">
			<h3>Fix lack of new HTML5 input implementation in IE, Firefox</h3>
			<input type="range" step="10" max='100' min='0'/><span></span>
		</div>
		
		<div id='f2'>
			<h3>Custom style of slider</h3>
			<input type="range"/><span></span>
			<br />
			<br />
			<input type="text"/><span></span>
		</div>
		
		<div id='f3'>
			<h3>Custom style of slider, vertical</h3>
			<input type="range"/><span></span>
		</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="jQuery.slider.js"></script>
	<script type="text/javascript">
		//Fix lack of new HTML5 input implementation in IE, Firefox
		$('#f1 input').slider({
			mode : 'basic',
			callback : function () {
				$(this).next().html(this.value);
			}
		});
		
		$('#f1 input').change(function () {
			$(this).next().html(this.value);
		});
		$('#f1 input')[0].onpropertychange = function () {
			if (event.propertyName === 'value') {
				this.nextSibling.innerHTML = this.value;
			}
		}
		
		//custom style of slider in all browsers
		$('#f2 input').slider({
			mode : 'advance',
			max : 100,
			min : 10,
			trackClass : 'track',
			handleClass : 'handle',
			callback : function () {
				$(this).next().html(this.value);
			}
		})
		
		//custom style of slider in all browsers
		$('#f3 input').slider({
			mode : 'advance',
			direction : 0,
			trackClass : 'track2',
			handleClass : 'handle2',
			callback : function () {
				$(this).next().html(this.value);
			}
		})
	</script>
	</body>
</html>